<template>
	
	<el-form-item
		:label="item.label"
		:prop="item.prop"
		:rules="[]"
		:style="{
			display: 'flex',
			width: '100%',
			padding: 0,
			flexFlow: item.labelPosition == 'top' || labelPosition == 'top' ? 'column' : 'row',
		}"
	>
		<template #label v-if="item.label || item.tip">
			<div class="flex align-center">
				<span v-if="item.label">{{ item.label }}:</span>
				<div>
					<el-tooltip effect="dark" v-if="item.tip" :content="item.tip" placement="top">
						<icon-info theme="outline" />
					</el-tooltip>
				</div>
			</div>
		</template>
		<!-- 套一个div,控制详情的展示宽度 -->
		<div :style="{width: '100%',display: 'flex','flex-flow':childrenItem.length > 0?'row nowrap':'row wrap'}">
			<slot v-if="!!slots[item.prop]" :name="item.prop" :row="item" :model="model"></slot>
			<DividerHtml class="split_solid" v-else-if="item.type == 'DividerHtml'" v-model="item.modelValue" :position="item.position" :custome="item.custome"></DividerHtml>
			<FilePage v-else-if="item.type == 'upload' || ['file', 'img','audio'].includes(item.custome)" :value="model[item.prop]" :item="item"></FilePage>
			<p v-else-if="item.type == 'ueditor'" style="word-break: break-word" v-html="model[item.prop]" class="text-value rich-content"></p>
			<RateXing v-else-if="item.custome == 'RateXing'" :item="item" :model="model"></RateXing>
			<HtmlLabel v-else-if="item.custome == 'HtmlLabel'" :title="model[item.prop] || item.title" :flag="item.flag"></HtmlLabel>
			<TablePage v-else-if="item.custome == 'table'" :value="model[item.prop]" :item="item" :model="model"></TablePage>
			<SwiperImg
				v-else-if="item.custome && item.custome == 'carousel'"
				:item="item"
				:model="model"
				:value="model[item.prop]"
				:style="{ ...item.style, width: item.width }"
			></SwiperImg>

			<DictTags  v-else-if="item.code || item.dicData" :value="detailMod[item.propName || item.prop]" :code="item.code" :item="item"></DictTags>

			<p v-else class="text-wrap text-value">
				<div class="the_text" v-if="model[item.propName || item.prop]&&model[item.propName || item.prop].length>50">
					<span class="ban_overflow">{{ item.defaultValue||(model[item.propName || item.prop].substr(0, 50) )|| '/' }}</span>
					<span>
						<el-tooltip placement="bottom" effect="light">
							<template #content>
								<div class="the_popper_class">{{ item.defaultValue||(model[item.propName || item.prop]) }}</div>
							</template>
							<span class="tex_show_more" @mouseenter="textMoreShow = true">...<span class="text-blue">更多</span></span>
						</el-tooltip>
					</span>
				</div>
				<span v-else>
					{{showValue(item)}}
					<small>{{ item.append }}</small>
				</span>
			</p>
			<el-row style="width:100%;" v-if="childrenItem.length > 0">
				<el-col
					:span="col.span || 4"
					v-for="col in childrenItem"
					:key="col.prop"
					:style="{ display: col.display == false || col.viewDisplay == false  ? 'none' : '' }"
				>
					<ContentListItem :item="col" style="width: 100%" :labelPosition="labelPosition" :model="model"></ContentListItem>
				</el-col>
			</el-row>
		</div>
	</el-form-item>
	

</template>

<script lang="ts">
import { defineComponent } from 'vue'
import SwiperImg from './SwiperImg/index.vue'
import FilePage from './FileList/index.vue'
import TagList from './TagList/index.vue'
import RateXing from './RateXing/index.vue'
import DictTags from './DictTags/home'
import TablePage from './Table/index.vue'
import DividerHtml from '@/views/aplid/DividerHtml/index.vue'
import { flatten } from '@/utils/util'

export default defineComponent({
	name: 'ContentListItem',
	components: {
		SwiperImg,
		FilePage,
		TagList,
		RateXing,
		DividerHtml,
		DictTags,
		TablePage,
	},
	props: {
		model: {
			type: Object,
			default: () => ({}),
		},
		item: {
			type: Object,
			default: () => ({}),
		},
		labelPosition: {
			type: String,
			default: 'left',
		},
	},
	setup(props, { slots }) {
		const childrenItem = computed(() => props.item.children || [])
		const detailMod = computed({
			get: () => flatten(props.model),
			set: (val) => {},
		})
		let textMoreShow = ref(false)
		let triggerRef = ref()
    const showValue = (item)=> {
      const value = item.defaultValue || (props.model[item.propName || item.prop])
      if(item.separator) {
        return value?.join(' '+item.separator+' ')
      }
      return value?value.toString():value|| '/'
    }
		return {
      showValue,
			childrenItem,
			slots,
			detailMod,
			textMoreShow,
			triggerRef,
		}
	},
})
</script>

<style scoped lang="scss">
.the_text{
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}
.tex_show_more {
	display: inline-block;
  min-width: 80px;
}
.ban_overflow {
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
}
.the_popper_class{
	width: 300px;
}
</style>
